@vcl/input

VCL input

Standard HTML form input controls.

Features

Styling of all HTML form controls like input, textarea, select and custom input (made of div and styling) based input controls.

Usage

Sizing

Text input controls are set to be inline-blocks and take 100% width by default. The occupied width can also be limited by placing input elements in a container with the desired size. Layout grid containers are perfectly suited for this purpose. Secondly they can be sized using the percentage based spans from the layout spans module.

Basic Input

Text inputs can be created with an HTML input element or from a div element with the vclInput class and additional attributes for accessibility.

text example

Placeholder

Custom an normal HTML inputs can have a placeholder.

placeholder example

Validation

The validation state of an input can be visualized by the standard modifiers vclError, vclWarning and vclSuccess.

validation-state example

Focused State

state-focused example

Disabled State

state-disabled example

Read only State

state-readonly example

Multi Line Text Input

textarea example

Radio Button

radio example

Check Box

checkbox example

File Selector

file example

Standard Select Box

select example

Classes

• vclInput

Modifiers

• vclFocused: Alternative to :focus pseudo class.
• vclDisabled: Visual disabled state, should be combined with disabled property.
• vclReadonly: Visual read only state, should be combined with readonly property.

Variables

• --input-height
• --input-line-height
• --input-textarea-line-height
• --input-outline-focus-color
• --input-color
• --input-text-placeholder-color
• --input-text-placeholder-font-style
• --input-border-width
• --input-border-color
• --input-border-radius
• --input-border-focus-color
• --input-bg-color
• --input-bg-focus-color
• --input-disabled-color
• --input-disabled-border-color
• --input-disabled-bg-color

Demo

example.html on GH-pages.